/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapWidget: React.FC = () => {
    function componentDid() {

        esriLoader.loadModules([
            'esri/map',
            'esri/dijit/Scalebar',
            'esri/dijit/OverviewMap',
            "esri/dijit/BasemapGallery",
            "esri/dijit/LocateButton",
        ]).then(([Map, Scalebar, OverviewMap, BasemapGallery, LocateButton]) => {
            const map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [-122.45, 37.75],
                zoom: 13
            });
            // 比例尺
            var scalebar = new Scalebar({
                map: map,
                attachTo: "bottom-left", // 代表比例尺在地图的位置，可以是”top-right”,”bottom-right”,”top-center”,”bottom-center”,”bottom-left”,”top-left”。默认是 “bottom-left”。
                scalebarUnit: "dual" //比例尺单位。可以是”english” 或”metric”或”dual”（同时显示english和metric）。默认是english（英尺）
                // scalebarStyle：比例尺样式，可以是：”ruler” 或”line”。
            });
            // 鹰眼图
            var overviewMapDijit = new OverviewMap({
                map: map,
                attachTo: "bottom-right", // 鹰眼图位置。
                color: "#D84E13", // 鹰眼图边框颜色。
                visible: true, //鹰眼图的可见性，默认是false
                // baseLayer：添加到鹰眼图上的底图（必须已经加载）
                // width：鹰眼宽度。默认地图的四分之一。
                // height：鹰眼图高度。默认地图的四分之一。
                // maximizeButton：最大最小化控制按钮的可见性，默认为false，不可见。
                // opacity：鹰眼图的透明度，默认是0.5。
            });
            overviewMapDijit.startup();
            // 底图切换
            var basemapGallery = new BasemapGallery({
                showArcGISBasemaps: true,
                map: map
            }, "basemapGallery");
            basemapGallery.startup();
            basemapGallery.on("error", function(msg: any) {
                console.log("basemap gallery error:  ", msg);
            });

            // 定位按钮
            var geoLocate = new LocateButton({
                map: map
            }, "LocateButton");
            geoLocate.startup();
              
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon">
            <div id="LocateButton"></div>
            <div id="basemapGallery"></div>
        </div>
    )
}
